<template>
  <a-card>
    <div>
      <a-form layout="horizontal">
        <div>
          <a-row >
            <a-col :md="6" :sm="24" >
              <a-form-item label="选择园区" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                <a-select v-model="query.farmName" placeholder="请选择园区" @change="farmChange">
                  <a-select-option
                      v-for="(item, index) in farmList"
                      :key="index" :value="item.FarmId">
                    {{item.FarmName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <div style="margin: 3px 0 0 8px;">
                <a-button type="primary" @click="search">查询</a-button>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <a-space class="operator">
        <a-button @click="add" type="primary">新建</a-button>
      </a-space>
      <standard-table style="margin-top: 10px"
          :rowKey="(data, index) => index"
          :columns="columns"
          :dataSource="greenHouseList">
        <div slot="action" slot-scope="{text, record}">
          <a style="margin-right: 8px" @click="editRecord(record)">
            <a-icon type="edit"/>编辑
          </a>
          <a-popconfirm title="确定删除?" @confirm="delRecord(record)">
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a href="#" style="margin-right: 8px; color: #f5222d"><a-icon type="delete" />删除</a>
          </a-popconfirm>
        </div>
      </standard-table>
    </div>
    <!-- modal -->
    <a-modal
        :title="modalTitle"
        width="900px"
        :visible="visible"
        @ok="confirm"
        @cancel="cancel">
      <a-form-model
          ref="landForm"
          :model="data"
          :rules="rules"
          :label-col="{span: 4}"
          :wrapper-col="{span: 14}">
        <a-form-model-item label="园区名称" prop="FarmId">
          <a-select v-model="data.FarmId" placeholder="请选择园区" @change="mdlFarmChange" :disabled="data.GreenHouseId ? true : false">
            <a-select-option v-for="(item, index) in farmList" :key="index" :value="item.FarmId">
              {{item.FarmName}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="地块名称" prop="GreenHouseName">
          <a-input v-model="data.GreenHouseName" type="text" allowClear/>
        </a-form-model-item>
        <a-form-model-item label="地块类型" prop="GreenHouseType">
          <a-input v-model="data.GreenHouseType" type="text" allowClear/>
        </a-form-model-item>
        <a-form-model-item label="地块长" prop="Length">
          <a-input v-model="data.Length" type="number" suffix="米" allowClear style="width: 200px"/>
        </a-form-model-item>
        <a-form-model-item label="地块宽" prop="Width">
          <a-input v-model="data.Width" type="text" suffix="米" allowClear style="width: 200px"/>
        </a-form-model-item>
        <a-form-model-item label="地块高" prop="Height">
          <a-input v-model="data.Height" suffix="米" type="text" allowClear style="width: 200px"/>
        </a-form-model-item>
        <a-form-model-item label="经度" prop="Lon">
          <a-input v-model="data.Lon" type="text" allowClear/>
        </a-form-model-item>
        <a-form-model-item label="纬度" prop="Lat">
          <a-input v-model="data.Lat" type="text" allowClear/>
        </a-form-model-item>
        <a-form-model-item label="作物名称" prop="Plant">
          <a-input v-model="data.Plant" type="text" allowClear/>
        </a-form-model-item>
        <a-form-model-item label="种植日期" prop="PlantDate">
          <a-date-picker
              :value="data.PlantDate ? momentDate(data.PlantDate) : ''"
              type="date"
              placeholder="选择种植日期"
              style="width: 200px;"
              @change="dateChange"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
  import moment from 'moment';
  import StandardTable from '@/components/table/StandardTable'
  import {list as farmList} from '@/services/farm'
  import { list as greenHouseList, add, del, edit } from '@/services/greenhouse'
  const columns = [
    {
      title: '地块名称',
      dataIndex: 'GreenHouseName',
      scopedSlots: { customRender: 'GreenHouseName' }
    },
    {
      title: '地块类型',
      dataIndex: 'GreenHouseType',
      scopedSlots: { customRender: 'GreenHouseType' }
    },
    {
      title: '长度',
      dataIndex: 'Length',
      scopedSlots: { customRender: 'Length' }
    },
    {
      title: '宽度',
      dataIndex: 'Width',
      scopedSlots: { customRender: 'Width' }
    },
    {
      title: '高度',
      dataIndex: 'Height',
      scopedSlots: { customRender: 'Height' }
    },
    {
      title: '作物名称',
      dataIndex: 'Plant',
      scopedSlots: { customRender: 'Plant' }
    },
    {
      title: '种植日期',
      dataIndex: 'PlantDate',
      scopedSlots: { customRender: 'PlantDate' }
    },
    {
      title: '种植次数',
      dataIndex: 'PlantCount',
      scopedSlots: { customRender: 'PlantCount' }
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' }
    }
  ]
  export default {
    name: "LandIndex",
    data() {
      return {
        modalTitle: '',
        visible: false,
        columns,
        farmList: [],
        greenHouseList: [],
        query: {
          farmId: '',
          farmName: ''
        },
        // greenHouseType: [
        //   {
        //     name: '普通',
        //     value: 'common'
        //   },
        //   {
        //     name: '玻璃',
        //     value: 'glasshouse'
        //   },
        //   {
        //     name: '大田',
        //     value: 'land'
        //   }
        // ],
        data: {
          Alt: 0,
          FarmId: '',
          GreenHouseId: 0,
          GreenHouseName: '',
          GreenHouseType: '',
          Height: 0,
          Lat: 0,
          Length: 0,
          Lon: 0,
          Plant: '',
          PlantCount: 0,
          PlantDate: '',
          Width: 0
        },
        rules: {
          FarmId: [
            { required: true, message: '请选择园区', trigger: 'change' },
          ],
          GreenHouseName: [
            { required: true, message: '请输入地块名称', trigger: 'change' },
          ]
        }
      }
    },
    computed: {
      momentDate(e) {
        return e => {
          return moment(e, 'YYYY-MM-DD')
        }
      }
    },
    components: {
      StandardTable
    },
    created() {
      this.getFarmList()
    },
    methods: {
      async getFarmList() {
        let res = await farmList()
        this.farmList = res.Data
      },
      async search() {
        let res = await greenHouseList(this.query.farmId)
        this.greenHouseList = res.Data
      },
      confirm() {
        this.$refs.landForm.validate(valid => {
          if (valid) {
            if(!this.data.GreenHouseId) {
              add(this.data).then(res => {
                if(res.Code == 0) {
                  this.$message.success('创建成功')
                  if(this.query.farmId) {
                    this.search()
                  }
                  this.data = this.$options.data().data
                } else this.$message.error('创建失败')
              }).catch(err => {
                console.log(err);
                this.$message.error('创建失败')
              })
            } else {
              edit(this.data).then(res => {
                if(res.Code == 0) {
                  this.$message.success('编辑成功')
                  this.search()
                  this.data = this.$options.data().data
                } else this.$message.error('编辑失败')
              }).catch(err => {
                console.log(err);
                this.$message.error('编辑失败')
              })
            }
            this.visible = false
          }
        })
      },
      cancel() {
        this.visible = false
        this.$refs.landForm.resetFields();
        this.data = this.$options.data().data
      },
      add() {
        this.visible = true
      },
      farmChange(e) {
        this.query.farmId = e
        console.log(e);
      },
      delRecord(row) {
        if(!row.GreenHouseId) {
          this.$message.error('无效地块')
          return
        }
        del(row.GreenHouseId).then(res => {
          if(res.Code == 0) {
            this.$message.success('删除成功')
            this.search()
          } else this.$message.error('删除失败')
        }).catch(err => {
          console.log(err);
          this.$message.error('删除失败')
        })
      },
      editRecord(row) {
        this.modalTitle = '编辑地块'
        this.data = {...row}
        this.visible = true
      },
      mdlFarmChange(e) {
        console.log(e);
      },
      dateChange(e, v) {
        console.log(v);
        this.data.PlantDate = v
      },
      dataInit() {
        // this.$options可以获取配置对象，配置对象的data函数执行，返回的响应式数据为空的
        Object.assign(this.$data, this.$options.data())
        this.getFarmList()
      }
    }
  }
</script>

<style scoped>

</style>
